<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div class="lime">
          <span :class="{ active: show }" @click="show = true">角色管理</span>
          <span :class="{ active: !show }" @click="show = false">公司设置</span>
        </div>
        <!-- 组件 -->
        <div>
          <Roles v-if="show" />
          <Company v-else />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Roles from './components/roles'
import Company from './components/company'

export default {
  components: {
    Roles,
    Company
  },
  data() {
    return {
      show: true
    }
  }
}
</script>
<style lang="scss" scoped>
.lime {
  line-height: 40px;
  height: 40px;
  padding: 0 5px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 15px;
}
span {
  display: inline-block;
  height: 100%;
  margin-right: 20px;
  font-size: 14px;
  &:hover {
    color: #409eff;
  cursor: pointer;

  }
}
.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}
</style>
